<template>
  <div>
    <el-dialog
      title="账号信息"
      :visible.sync="dialogVisible"
      width="550px"
      :before-close="closeAddDialog"
      :close-on-click-modal="false"
    >
      <el-form :model="addForm" ref="refAddForm" label-width="80px">
        <el-form-item size="small" label="头像">
          <div class="portrait">
            <el-image :src="src" v-if="addForm.avatar == 1"></el-image>
            <el-image :src="src2" v-else-if="addForm.avatar == 2"></el-image>
            <el-image :src="src3" v-else-if="addForm.avatar == 3"></el-image>
            <el-image :src="src4" v-else-if="addForm.avatar == 4"></el-image>
            <el-image :src="src5" v-else-if="addForm.avatar == 5"></el-image>
            <el-image :src="src6" v-else-if="addForm.avatar == 6"></el-image>
            <el-image :src="portrait" v-else></el-image>
            <div class="xiugai">
              <span
                style="
                  cursor: pointer;
                  height: 100%;
                  display: flex;
                  align-items: center;
                "
                @click="editAvatar"
                >修改</span
              >
            </div>
          </div>
        </el-form-item>
        <el-form-item size="small" label="用户名">
          <el-input
            clearable
            v-model.trim="addForm.userName"
            maxlength="20"
            disabled
            style="width: 100%"
          >
          </el-input>
        </el-form-item>
        <el-form-item size="small" label="角色">
          <el-input
            clearable
            v-model.trim="addForm.roleDescription"
            maxlength="20"
            disabled
            style="width: 100%"
          >
          </el-input>
        </el-form-item>
        <el-form-item size="small" label="昵称" prop="nickname">
          <el-input
            clearable
            v-model.trim="addForm.nickname"
            placeholder="请输入"
            maxlength="20"
            style="width: 100%"
          >
          </el-input>
        </el-form-item>
        <el-form-item size="small" label="手机号">
          <el-input
            clearable
            v-model.trim="addForm.mobile"
            maxlength="20"
            disabled
            style="width: 100%"
          >
          </el-input>
        </el-form-item>
        <el-form-item size="small" label="租户">
          <el-input
            clearable
            v-model.trim="addForm.tenantName"
            maxlength="20"
            disabled
            style="width: 100%"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeAddDialog" class="cancel-button">取 消</el-button>
        <el-button
          size="small"
          @click="addSubmit"
          v-preventReClick="1000" class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <editAvatar ref="refeditAvatar" @onAvatar="onAvatar"></editAvatar>
  </div>
</template>

<script>
import { updateUser } from "@api/api";
import { mapState } from "vuex";
import editAvatar from "../../views/personal2/components/editAvatar.vue";

export default {
  components: { editAvatar },
  data() {
    return {
      src: require("@assets/images/touxiang1.png"),
      src2: require("@assets/images/touxiang2.png"),
      src3: require("@assets/images/touxiang3.png"),
      src4: require("@assets/images/touxiang4.png"),
      src5: require("@assets/images/touxiang5.png"),
      src6: require("@assets/images/touxiang6.png"),
      dialogVisible: false,
      addForm: {
        avatar: "",
        userName: "",
        roleDescription: "",
        nickname: "",
        mobile: "",
        tenantName: "",
      },
      portrait: require("@assets/images/portrait.png"),
      // 表单验证规则
      dataList: [],

      projectList: [], //单位数据
      sysInstanceIndex: 1,
      sysInstanceTotalPages: 10,
      loading: false,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.addForm.avatar = this.user.avatar;
        this.addForm.userName = this.user.userName;
        this.addForm.roleDescription = this.user.roleDescription;
        this.addForm.nickname = this.user.nickName;
        this.addForm.mobile = this.user.mobile;
        this.addForm.tenantName = this.user.tenantName;
      }
    },
  },
  methods: {
    // 修改头像
    editAvatar() {
      this.$refs.refeditAvatar.dialogVisible = true;
    },
    // 获取头像
    onAvatar(e) {
      this.addForm.avatar = e;
    },
    addUserId() {
      this.$refs.refaddUserId.innerVisible = true;
    },

    // 点击新增
    addSubmit() {
      this.$refs.refAddForm.validate(async (valid) => {
        if (!valid) return;
        this.addForm.id = this.user.userId;
        const res = await updateUser(this.addForm);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$store.commit("saveAvatar", this.addForm.avatar);
        this.$store.commit("saveNickName", this.addForm.nickname);
        this.$modal.notifySuccess("操作成功");
        this.closeAddDialog();
      });
    },
    // 点击关闭弹框
    closeAddDialog() {
      this.$refs.refAddForm.resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../views/common.less");

.portrait {
  min-width: 80px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 10;
  .el-image {
    border-radius: 50%;
    width: 80px;
    height: 80px;
  }
  &:hover .xiugai {
    height: 30%;
    display: flex;
  }
  .xiugai {
    display: none;
    transition: all 0.2s ease-out 0s;
    position: absolute;
    opacity: 0.75;
    background: rgb(24, 24, 24);
    color: rgb(255, 255, 255);
    bottom: 0;
    height: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 99;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
}

::v-deep .el-input.is-disabled .el-input__inner {
  color: #858585 !important;
}
</style>
